<template>
	<div class="header">
		<div class="content-wraper">
			<div class="avatar">
				<img v-bind:src="seller.avatar" alt="" width="64" height="64" />
			</div>
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟送达
				</div>
				<div v-if="seller.supports" class="support">
					<span class="icon" v-bind:class="classMap[seller.supports[0].type]"></span>
					<span class="text">{{seller.supports[0].description}}</span>
				</div>
			</div>
			<div v-if="seller.supports" class="support-count" v-on:click="showDetail()">
				<span class="count">{{seller.supports.length}}</span>
				<i class="icon-keyboard_arrow_right"></i>
			</div>
		</div>
		<div class="bulletin-wraper">
			<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
			<i class="icon-keyboard_arrow_right"></i>
		</div>
		<div class="background">
			<img v-bind:src="seller.avatar" width="100%" height="100%" />
		</div>
		<transition name="fade">
			<div v-show="detailShow" class="detail">
				<div class="detail-wraper">
					<div class="detail-main">
						<div class="name">{{seller.name}}</div>
						<div class="star-wraper">
							<v-star v-bind:size="48" v-bind:score="seller.score"></v-star>
						</div>
						<div class="title">
							<div class="line"></div>
							<div class="text">优惠信息</div>
							<div class="line"></div>
						</div>
						<ul class="supports" v-if="seller.supports">
							<li class="supports-item" v-for="(item, index) in seller.supports">
								<span class="icon" v-bind:class="classMap[index]"></span>
								<span class="text">{{seller.supports[index].description}}</span>
							</li>
						</ul>
						<div class="title">
							<div class="line"></div>
							<div class="text">商家公告</div>
							<div class="line"></div>
						</div>
						<div class="bulletin">
							<p class="content">{{seller.bulletin}}</p>
						</div>
					</div>
				</div>
				<div class="detail-close">
					<i class="icon-close" v-on:click="hideDetail()"></i>
				</div>
			</div>
		</transition>
	</div>
</template>

<script type="text/ecmascript-6">
	import star from '../star/star.vue';

	export default {
		props: {
			seller: {
				type: Object
			}
		},
		data () {
			return {
				detailShow: false
			};
		},
		methods: {
			showDetail () {
				this.detailShow = true;
			},
			hideDetail () {
				this.detailShow = false;
			}
		},
		created () {
			this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
		},
		components: {
			'v-star': star
		}
	};
</script>

<style lang="less">
	@import '../../common/less/z.less';
	@import '../../common/less/css3.less';
	@import '../../common/less/appstyle.less';
	.header {
		.pos(r);
		color: #fff;
		background: rgba(7, 17, 27, 0.4);
		overflow: hidden;
		.content-wraper {
			.pos(r);
			padding: 24px 12px 18px 24px;
			.avatar {
				.d-ib();
				img {
					.border-radius();
				}
			}
			.content {
				.d-ib();
				margin-left: 14px;
				.font-s14();
				.title {
					margin: 2px 0 8px 0;
					.brand {
						.d-ib();
						width: 30px;
						height: 18px;
						.bg-image('../../../resource/img/brand@2x.png', '../../../resource/img/brand@3x.png');
						.bg-sz(30px, 18px);
						.bgr-no();
					}
					.name {
						margin-left: 6px;
						line-height: 18px;
						.font-wb();
						.font-s16();
					}
				}
				.description {
					margin-bottom: 10px;
					line-height: 12px;
					.font-s12();
				}
				.support {
					.icon {
						.d-ib();
						.wh(12px);
						margin-right: 4px;
						.bg-sz(12px, 12px);
						.bgr-no();
						&.decrease {
							.bg-image('../../../resource/img/decrease_1@2x.png', '../../../resource/img/decrease_1@3x.png');
						}
						&.discount {
							.bg-image('../../../resource/img/discount_1@2x.png', '../../../resource/img/discount_1@3x.png');
						}
						&.guarantee {
							.bg-image('../../../resource/img/guarantee_1@2x.png', '../../../resource/img/guarantee_1@3x.png');
						}
						&.invoice {
							.bg-image('../../../resource/img/invoice_1@2x.png', '../../../resource/img/invoice_1@3x.png');
						}
						&.special {
							.bg-image('../../../resource/img/special_1@2x.png', '../../../resource/img/special_1@3x.png');
						}
					}
					.text {
						line-height: 12px;
						.font-s10();
					}
				}
			}
			.support-count {
				.pos(a);
				right: 12px;
				bottom: 18px;
				padding: 0 8px;
				.l-h(24px);
				.border-radius(14px);
				background: rgba(0, 0, 0, 0.2);
				.tc();
				.count {
					.font-s10();
				}
				.icon-keyboard_arrow_right {
					margin-left: 2px;
					line-height: 24px;
					.font-s10();
				}
			}
		}
		.bulletin-wraper {
			.pos(r);
			.l-h(28px);
			padding: 0 22px 0 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			background: rgba(7, 17, 27, 0.2);
			.bulletin-title {
				.d-ib();
				width: 22px;
				height: 12px;
				margin-top: 8px;
				vertical-align: top;
				.bg-image('../../../resource/img/bulletin@2x.png', '../../../resource/img/bulletin@3x.png');
				.bg-sz(22px, 12px);
				.bgr-no();
			}
			.bulletin-text {
				.font-s10();
				vertical-align: top;
				margin: 0 4px;
			}
			.icon-keyboard_arrow_right {
				.pos(a);
				.font-s10();
				right: 12px;
				top: 8px;
			}
		}
		.background {
			.pos(a);
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			filter: blur(10px);
		}
		.detail {
			.pos(f);
			top: 0;
			left: 0;
			z-index: 100;
			.wh(100%);
			overflow: auto;
			background: rgba(7, 17, 27, 0.9);
			backdrop-filter:blur(10px);
			&.fade-enter-active{
				transition: all .5s ease;
			}
			&.fade-leave-active{
				transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
			}
			&.fade-enter,&.fade-leave-active{
				transform: translateY(-10px);
				opacity:0;
			}
			.detail-wraper {
				width: 100%;
				.min-height(100%);
				.clearfix();
				.detail-main {
					margin-top: 64px;
					padding-bottom: 64px;
					.name {
						line-height: 16px;
						.tc();
						.font-s16();
						.font-wb();
					}
					.star-wraper {
						margin-top: 18px;
						padding: 2px 0;
						.tc();
					}
					.title {
						display: flex;
						width: 80%;
						margin: 30px auto 24px auto;
						.line {
							flex: 1;
							.pos(r);
							top: -6px;
							border-bottom: 1px solid rgba(255, 255, 255, .3);
						}
						.text {
							padding: 0px 12px;
							.font-s14();
							.font-wb();
						}
					}
					.supports {
						width: 80%;
						margin: 0 auto;
						.supports-item {
							padding: 0 12px;
							margin-bottom: 12px;
							.font-s0();
							&:last-child {
								margin-bottom: 0;
							}
							.icon {
								.d-ib();
								.wh(16px);
								vertical-align: top;
								margin-right: 6px;
								.bg-sz(16px, 16px);
								.bgr-no();
								&.decrease {
									.bg-image('../../../resource/img/decrease_2@2x.png', '../../../resource/img/decrease_2@3x.png');
								}
								&.discount {
									.bg-image('../../../resource/img/discount_2@2x.png', '../../../resource/img/discount_2@3x.png');
								}
								&.guarantee {
									.bg-image('../../../resource/img/guarantee_2@2x.png', '../../../resource/img/guarantee_2@3x.png');
								}
								&.invoice {
									.bg-image('../../../resource/img/invoice_2@2x.png', '../../../resource/img/invoice_2@3x.png');
								}
								&.special {
									.bg-image('../../../resource/img/special_2@2x.png', '../../../resource/img/special_2@3x.png');
								}
							}
							.text{
								line-height:12px;
								.font-s12();
							}
						}
					}
					.bulletin{
						width:80%;
						margin:0 auto;
						.content{
							padding:0 12px;
							line-height:24px;
							.font-s12();
						}
					}
				}
			}
			.detail-close {
				.pos(r);
				.wh(32px);
				margin: -64px auto 0px auto;
				clear: both;
				.font-s32();
			}
		}
	}
</style>
